<template>
  <div>
<!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>分类参数</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图 -->
<el-card>
  <!-- 提示 -->
  <!-- closable显示叉号 show-icon警告图标 -->
  <el-alert
    title="注意:只允许为第三级分类设置相关参数!"
    type="warning" closable show-icon>
  </el-alert>
  <!-- 选择商品分类区域 -->
  <el-row>
    <el-col>
      <span>选中商品分类:</span>
       <el-cascader
    v-model="selectedkeys"
    :options="catlist"
    :props="cascaderprops"
    @change="handleChange"
    clearable></el-cascader>
    </el-col>

  </el-row>
  <!--tab页签区域  -->
  <el-tabs v-model="activeName" @tab-click="tabClick">
    <!-- 动态参数面板 -->
    <el-tab-pane label="动态参数" name="many">
      <el-button :disabled="isdisabled" type="primary" size="mini" @click="isdialogVisible=true">添加参数</el-button>
      <el-table :data="manyparamslist" border stripe>
        <!-- 展开行 -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-tag v-for="(item,i) in scope.row.attr_vals" :key="i" closable>{{item}}</el-tag>
            <!-- 输入文本框 -->
            <el-input
  class="input-new-tag"
  v-if="scope.row.inputVisible"
  v-model="scope.row.inputValue"
  ref="saveTagInput"
  size="small"
  @keyup.enter.native="handleInputConfirm"
  @blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
          </template>
        </el-table-column>
        <el-table-column type="index">
        </el-table-column>
        <el-table-column label="属性名称" prop="attr_name">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showeditdialog(scope.row.attr_id)" >编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteParams(scope.row.attr_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <!-- 静态属性面板 -->
    <el-tab-pane label="静态属性" name="only">
      <el-button  type="primary" size="mini" @click="isdialogVisible=true">添加属性</el-button>
       <el-table :data="onlyparamslist" border stripe>
        <el-table-column type="index">
        </el-table-column>
        <el-table-column label="属性名称" prop="attr_name">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showeditdialog(scope.row.attr_id)">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteParams(scope.row.attr_id)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
</el-card>
<!-- 添加参数、属性对话框 -->
<el-dialog
  :title="'添加'+catedialog"
  :visible.sync="isdialogVisible"
  width="30%"
  @close="handleClose">
  <!-- 添加表单 -->
  <el-form :model="addForm" :rules=" addFormrules" ref="addFormref" label-width="100px">
  <el-form-item :label="catedialog" prop="attr_name">
    <el-input v-model=" addForm.attr_name"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="isdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
</el-dialog>
<!-- 修改对话框 -->
<el-dialog
  :title="'修改'+catedialog"
  :visible.sync="iseditdialogVisible"
  width="30%"
  @close="edithandleClose">
  <!-- 添加表单 -->
  <el-form :model="editForm" :rules=" editFormrules" ref="editFormref" label-width="100px">
  <el-form-item :label="catedialog" prop="attr_name">
    <el-input v-model=" editForm.attr_name"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="iseditdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editCate()">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      catlist: [],
      cascaderprops: {
        // 看到的属性
        label: 'cat_name',
        // 选中得值的属性
        value: 'cat_id',
        // 父子嵌套的属性
        children: 'children',
        expandTrigger: 'hover'
        // 可选任意一级的分类
        // checkStrictly: true
      },
      selectedkeys: [],
      // 被激活的页签name
      activeName: 'many',
      // 获取的动态参数数组
      manyparamslist: [],
      onlyparamslist: [],
      // 控制添加对话框的显示
      isdialogVisible: false,
      addForm: {
        attr_name: ''
      },
      addFormrules: {
        attr_name: [{ required: true, message: '请输入属性或参数名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }]
      },
      iseditdialogVisible: false,
      editForm: {
        attr_name: ''
      },
      editFormrules: {
        attr_name: [{ required: true, message: '请输入属性或参数名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }]
      }
      // // 控制控制按钮和文本框的显示
      // inputVisible: false,
      // // 文本框输入的内容
      // inputValue: ''
    }
  },
  computed: {
    isdisabled () {
      if (this.selectedkeys.length > 0) return false
      return true
    },
    catedialog () {
      if (this.activeName === 'many') return '动态参数'
      else return '静态属性'
    }
  },
  created () {
    this.getcatlist()
  },
  methods: {
    async getcatlist () {
      const { data: res } = await this.$http.get('categories')
      // if (res.meta.status !== 200) return this.$message.erro(res.meta.msg)
      this.catlist = res.data
      // console.log(res.data)
    },
    handleChange () {
      this.getparams()
    },
    tabClick () {
      this.getparams()
    },
    // 封装发起请求函数
    async getparams () {
      const { data: res } = await this.$http.get(`categories/${this.selectedkeys[this.selectedkeys.length - 1]}/attributes`, { params: { sel: this.activeName } })
      // if (res.meta.status !== 200) return this.$message.erro(res.meta.msg)
      // console.log(res)
      console.log(this.activeName)
      if (this.activeName === 'many') this.manyparamslist = res.data
      // console.log(this.manyparamslist)
      this.onlyparamslist = res.data
      // 将字符串按照空格分割成数组
      res.data.forEach((item) => {
        // 空字符串时直接返回空数组
        item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
        // 为每一组参数都指定一个添加tag的布尔值和绑定数据
        item.inputVisible = false
        item.inputValue = ''
      })
      console.log(res.data)
    },
    handleClose () {
      this.addForm = {}
    },
    async addCate () {
      this.$refs.addFormref.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post(`categories/${this.selectedkeys[this.selectedkeys.length - 1]}/attributes`, {
          attr_name: this.addForm.attr_name,
          attr_sel: this.activeName
        })
        if (res.meta.status !== 201) return
        this.isdialogVisible = false
        this.getparams()
      })
    },
    // 修改对话框
    async showeditdialog (attrid) {
      this.iseditdialogVisible = true
      const { data: res } = await this.$http.get(`categories/
      ${this.selectedkeys[this.selectedkeys.length - 1]}/attributes/
      ${attrid}`,
      { params: { attr_sel: this.activeName } })
      this.editForm = res.data
    },
    // 关闭重置
    edithandleClose () {
      this.editForm = { }
    },
    // 提交
    async editCate () {
      this.$refs.editFormref.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.put(`categories/
        ${this.selectedkeys[this.selectedkeys.length - 1]}/attributes/
        ${this.editForm.attr_id}`,
        {
          attr_name: this.editForm.attr_name,
          attr_sel: this.activeName
        })
        console.log(res)
        if (res.meta.status !== 200) return
        this.iseditdialogVisible = false
        this.getparams()
      })
    },
    // 删除属性、参数
    async deleteParams (attrid) {
      const deleteresult = await
      this.$confirm('此操作将永久删除该属性/参数, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
      })
      if (deleteresult !== 'confirm') {
        return this.$message({
          type: 'info',
          message: '取消删除'
        })
      }
      // await 不允许嵌套在then函数里面，所以写在外面
      const { data: res } = await this.$http.delete(`categories/
     ${this.selectedkeys[this.selectedkeys.length - 1]}/attributes/
        ${attrid}`)
      // 不允许删除admin账户
      // console.log(res)
      if (res.meta.status !== 200) {
        return this.$message({
          type: 'info',
          message: '删除失败'
        })
      }
      // 重新获取用户列表
      this.getparams()
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
    },
    // 添加tag分类参数
    handleInputConfirm () {

    },
    showInput (row) {
      console.log(row.inputVisible)
      row.inputVisible = true
    }
  }
}
</script>
<style scoped>
.el-row{
  margin-top: 15px;
}
.el-tag{
  margin: 10px;
}
.input-new-tag{
  width: 120px;
}
</style>
